<template>
  <div class="page-detail">
    <van-nav-bar
      :title="data.category"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-popover
          v-model:show="showPopover"
          placement="bottom-end"
          theme="dark"
          :actions="actions"
          @select="onSelect"
        >
          <template #reference>
            <van-icon name="ellipsis" size="18" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>

    <div class="body" @click="handlePlay">
      <!-- 轮播图 -->
      <div class="banner">
        <van-swipe class="swipe" :autoplay="3000" indicator-color="blue">
          <van-swipe-item v-for="(item, index) in banners" :key="index">
            <img class="img" :src="item" alt="" />
          </van-swipe-item>
        </van-swipe>

        <!-- 播放视频按钮 -->
        <div class="btn-play">
          <van-icon name="play-circle-o" color="#ff0000" size="30" />
          <span class="time">00′55″</span>
        </div>
      </div>
      <!-- 文字描述 -->
      <div class="text_title">
        <div><span class="text_title_a">自营</span>{{ data.proname }}</div>
      </div>

      <div style="height: 2000px"></div>
    </div>

    <!-- 底部 ActionBar -->
    <van-action-bar>
      <van-action-bar-icon icon="cart-o" text="购物车" :to="{ name: 'cart' }" />
      <van-action-bar-button
        type="warning"
        text="加入购物车"
        @click="addcart"
      />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>

    <!-- 视频播放的弹出层 -->
    <van-popup v-model:show="showPopup">
      <video
        ref="videoRef"
        width="300"
        controls
        src="https://jvod.300hu.com/vod/product/b1024a62-8c46-464c-8ec7-f57d26cceb38/42f70c8e8bbb442e986874ec556fc882.mp4"
      ></video>
    </van-popup>
  </div>
</template>

<script lang="ts">
export default {
  name: "detail",
};
</script>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { ref, nextTick } from "vue";

import { useDetail } from "@/hooks/detail";

import { useCartStore } from "@/stores/cart";
import { useUseStore } from "@/stores/user";

// 通过useRouter获取路由器实例对象
const router = useRouter();
const onClickLeft = () => {
  router.back();
};

// 右上角 下拉弹窗数据配置
const showPopover = ref(false);
const actions = [{ text: "选项一" }, { text: "选项二" }, { text: "选项三" }];
const onSelect = (actions: any) => {
  console.log("onselect", actions.text);
};
// 视频播放
const videoRef = ref();
const showPopup = ref(false);
const handlePlay = () => {
  // 打开弹窗
  showPopup.value = true;
  // console.log(videoRef.value)
  nextTick(() => {
    // console.log(videoRef.value)
    videoRef.value.play();
  });
};

const { proid, data, banners } = useDetail();

const cartStore = useCartStore();
const userStore = useUseStore();
// 加入购物车
const addcart = () => {
  cartStore.add({
    userid: userStore.userid,
    proid: proid,
    num: 1,
  });
};
</script>

<style lang="scss" scoped>
.page-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;

  .body {
    flex: 1;
    overflow-y: auto;
  }

  // .van-action-bar{
  //     position: static;
  // }
}

.banner {
  height: 375px;
  position: relative;

  .swipe {
    height: 100%;
  }

  .img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .btn-play {
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform: translate(-50%, -50%);
    background: #fff;
    font-weight: bold;
    font-size: 16px;
    text-align: left;
    box-sizing: border-box;
    padding: 0 8px 0 2px;
    width: 85px;
    height: 30px;
    border-radius: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0.95;
  }
}

:deep(.van-action-bar-button--last) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

//商品下方的文字描述
.text_title {
  padding: 15px;
  font-size: 16px;
  &_a {
    margin-right: 10px;
    display: inline-block;
    padding: 0 5px;
    background-color: red;
    color: #fff;
    border-radius: 4px;
  }
}
</style>
